<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/reset.css" />
		<style type="text/css">
			*{
				padding:0;
				margin: 0;
				
			}
			
			a{
				text-decoration: none;
			}
			.nav{
				width: 1210px;
				height: 48px;
				background-color: #e8e7e3;
				margin: 50px auto;
				line-height: 48px;
				/*设置为弹性容器*/
				display: flex;
				
				
			}
			/*设置增长系数*/
			.nav li{
				height: 48px;
				flex-grow: 1;
				
			}
			.nav li a{
				display: block;
				font-size: 18px;
				color:#818180;
				text-align: center;
				
			}
			.nav li a:hover{
				color: #fff;
				background-color: #636363;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">HTML/CSS</a>
			</li>
			
			<li>
				<a href="#">Browser Side</a>
			</li>
			
			<li>
				<a href="#">Server Side</a>
			</li>
			
			<li>
				<a href="#">Programming</a>
			</li>
			
			<li>
				<a href="#">XML</a>
			</li>
			
			<li>
				<a href="#">Web Building</a>
			</li>
			
			<li>
				<a href="#">Reference</a>
			</li>
			
		</ul>
		
	</body>
</html>
